<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片局部放大</title>
    <style>
        .container {
            width: 1000px;
            height: 578px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }

        .left-img {
            display: inline-block;
            width: 490px;
            height: 510px;
            border: 1px solid #000;
            margin-left: 4px;
            /* 图片 */
            background-image: url(./images/imgA_2.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            /* 定位，用于移动mask */
            position: relative;

        }

        .left-img>.mask {
            width: 230px;
            height: 230px;
            background-image: url(./images/bg.png);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .left-img>img {
            width: 490px;
        }

        .right-img {
            display: inline-block;
            width: 490px;
            height: 510px;
            border: 1px solid #000;
            background-image: url(./images/imgA_3.jpg);
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
        }

        .img-list {
            width: 490px;
            height: 60px;
        }

        .img-list>img {
            width: 60px;
            height: 60px;
        }

        .img-list>.active {
            border: 2px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- 最外层容器 -->
    <div class="container">
        <!-- 左侧原图 -->
        <div class="left-img">
            <div class="mask"></div>
        </div>
        <!-- 右侧放大图 -->
        <div class="right-img"></div>
        <!-- 底部缩略图集合 -->
        <div class="img-list">
            <img src="./images/imgA_1.jpg" index="imgA_2" class="active" alt="">
            <img src="./images/imgB_1.jpg" index="imgB_2" alt="">
            <img src="./images/imgC_1.jpg" index="imgC_2" alt="">
        </div>
    </div>
    <script>
        // 左侧原图容器
        var midImg = document.querySelector(".left-img");
        var mask = document.querySelector(".mask");
        var midImgs = midImg.querySelectorAll("img");
        // 右侧放大图容器
        var largeImg = document.querySelector(".right-img");
        // 底部缩略图容器
        var smImg = document.querySelector(".img-list");
        var smImgs = smImg.querySelectorAll("img");
        // 图片资源
        // var imgs = {
        //     small: ['imgA_1', 'imgB_1', 'imgC_1'],
        //     middle: ['imgA_2', 'imgB_2', 'imgC_2'],
        //     large: ['imgA_3', 'imgB_3', 'imgC_3']
        // }
        function init() {
            onClickEvent();
            onMouseMoveEvent();
            onMouseLeaveEvent();
        }
        function onClickEvent() {// 缩略图点击事件
            smImg.onclick = function (e) {
                if (e.target.tagName == 'IMG') {
                    var val = e.target.getAttribute("index");
                    var activeImg = smImg.querySelector('.active');
                    activeImg.setAttribute("class", "");
                    e.target.setAttribute("class", "active");
                    midImg.setAttribute("style", "background-image:url(./images/" + val + ".jpg)")
                }
            }
        }
        function onMouseMoveEvent() {// 原图鼠标移入移出移动事件
            midImg.onmousemove = function (e) {
                mask.style.opacity = 1;
                largeImg.style.opacity = 1;
                // 根据鼠标位置计算遮罩层的位置
                var left = e.clientX - midImg.offsetLeft - mask.offsetWidth / 2;
                var top = e.clientY - midImg.offsetTop - mask.offsetHeight / 2;
                console.log(left)
                if (left <= 0) {
                    left = 0;
                }
                if (top <= 0) {
                    top = 0;
                }
                if (left >= midImg.offsetWidth - mask.offsetWidth) {
                    left = midImg.offsetWidth - mask.offsetWidth;
                }
                if (top >= midImg.offsetHeight - mask.offsetHeight) {
                    top = midImg.offsetHeight - mask.offsetHeight;
                }
                mask.style.top = top + "px";
                mask.style.left = left + "px";
                // 根据top和left，修改大图的位置，background-position
                largeImg.style.backgroundPositionX = -left + 'px';
                largeImg.style.backgroundPositionY = -top + 'px';
            }
        }
        function onMouseLeaveEvent() {// 原图鼠标移入移出移动事件
            midImg.onmouseleave = function () {
                mask.style.opacity = 0;
                largeImg.style.opacity = 0;
            }
        }
        init();
    </script>
</body>

</html>